<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Nicolas FATOUX, Cyril GRAND">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
	<meta name="Copyright" content="http://netduino4fun.codeplex.com/">
	<title></title>
	<link rel="stylesheet" href="http://azar121.free.fr/js/jquerymobile/jquery.mobile-1.1.0-rc.1.min.css"
		type="text/css" />
	<style type="text/css">
		/* App custom styles */
		#led-enable
		{
			display: table;
			float: right;
			margin: 0 5px;
		}
		
		#led-enable > div
		{
			width: 120px;
		}
		
		#led-title {
			margin: 0.6em auto 0.8em;
		}
	</style>
	<script src="http://azar121.free.fr/js/jquery-1.7.1.min.js" type="text/javascript">
	</script>
	<script src="http://azar121.free.fr/js/jquerymobile/jquery.mobile-1.1.0-rc.1.min.js"
		type="text/javascript">
	</script>
	<script src="http://azar121.free.fr/js/raphael-min.js" type="text/javascript">
	</script>
	<script src="http://azar121.free.fr/js/colorwheel.js" type="text/javascript">
	</script>
	<script src="http://azar121.free.fr/js/colorpicker.js" type="text/javascript">
	</script>
	<script type="text/javascript">

		(function ($, R) {
			$.fn.colorpicker = function (size, initcolor) {
				if (R) {
					var offset = this.offset();
					return R.colorpicker(offset.left, offset.top, size, initcolor, this[0]);
				}
				return null;
			};
		})(window.jQuery, window.Raphael);

		(function ($, R) {
			$.fn.colorwheel = function (size, initcolor) {
				if (R) {
					var offset = this.offset();
					return R.colorwheel(offset.left, offset.top, size, initcolor, this[0]);
				}
				return null;
			};
		})(window.jQuery, window.Raphael);

		var antiFlood = false;

		function update(clr) {
			update2(clr, false);
		}

		function update2(clr, force) {
			if (!ledEnable) return;
			var color = Raphael.getRGB(clr);
			if (antiFlood && !force) return;
			antiFlood = true;
			var colorPost = "r=" + color.r + "&g=" + color.g + "&b=" + color.b + "&hex=" + color.hex;
			$.ajax({
				type: "POST",
				url: "led/setRGB",
				data: colorPost
			});
			//				.done(function (msg) {
			//				// Anti flood
			//				window.setTimeout(
			//					function () {
			//						antiFlood = false;
			//					},
			//					10
			//				);
			//				//alert("Data Saved: " + msg + colorPost);

			//				});

			window.setTimeout(
					function () {
						antiFlood = false;
					},
					500
				);
		}

		var cp;
		var ledEnable = true;
		$(document).ready(function () {

			cp = $("#picker").colorpicker(300, "#eee");
			cp.onchange = function (clr) {
				update(clr);
			};
			$("#picker").mouseup(function () {
				update2(cp.color(), true);
			});

			$("#slider-led-enable").bind("change", function (event, ui) {
				if (this.selectedIndex == 1) {
					ledEnable = true;
					update2(cp.color(), true);
				}	
				else
					ledEnable = false;
				var post = "val=" + this.selectedIndex;
				$.ajax({
					type: "POST",
					url: "led/enable",
					data: post
				});
			});

			return;

			Raphael(function () {
				cp = Raphael.colorwheel(40, 20, 300, "#eee", "picker");
				cp.onchange = function (clr) {
					//console.log(clr);
					update(clr);
				};
			});
		});
	</script>
</head>
<body>
	<div data-role="page" data-theme="a" data-title="RGB Led">
		<div data-role="header" data-position="inline">
			<h1 id="led-title">
				Welcome to RGB Led Network</h1>
			<div class="ui-bar">
				<div id="led-enable">
					<select id="slider-led-enable" data-role="slider" data-theme="c" data-track-theme="c">
						<option value="off">Led Off</option>
						<option selected="selected" value="on">Led On</option>
					</select>
				</div>
			</div>
		</div>
		<div data-role="content">
			<div>
				<!-- style="margin: auto;display: table">-->
				<div id="picker" style="height: 100%; width: 100%">
				</div>
			</div>
		</div>
		<!-- /content -->
		<div data-role="footer">
			<h4>
				&copy; 2011-2012 <a href="http://netduino4fun.codeplex.com/" target="_blank">netduino4fun</a>
				<br />
				by Nicolas FATOUX and Cyril GRAND
			</h4>
		</div>
	</div>
</body>
</html>
